<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
      width: 100px;
      height: 100px;
      background-color: khaki;
      margin: 150px;
    }
    .item {
      width: 100px;
      height: 100px;
      background-color: rgb(255, 99, 71, 0.5);
      /* 宽放大2倍，高放大1.5倍 */
      transform: scale(2, 1.5);
      /* 宽高同时放大2倍 */
      transform: scale(2);
      /* 宽缩小一半，高放大2倍 */
      transform: scale(0.5, 2);
    }
  </style>
  <body>
    <!-- TIP
            x，y 都是数字类型，也可以用百分比%表示，分别表示元素的宽和高缩放比
            当 x，y 的值 >1 时，表示放大; <1 时，表示缩小； =1 表示不变
            当只有 x，没有 y 时，则 y 默认为 x，元素宽高同时均匀缩放 -->

    <div class="box">
      <div class="item"></div>
    </div>
  </body>
</html>